<template xmlns:el-col="http://www.w3.org/1999/html">
  <div>
    <div class="header" style="overflow: hidden;width: 100% ;">
      <el-row>
        <el-col :span="2">
          <div style="height: 60px">
          </div>
        </el-col>
        <el-col :span="7" style="height: 100%">
          <el-row type="flex" justify-cont="space-around" style="height: 60px; color: #EEEEEE">
            <el-col align="center" style="line-height:60px " class="menuButton" @click="clickHome">
              <div style="height: 100%" @click="clickHome"><i class="el-icon-s-home"/>&nbsp;首页</div>
            </el-col>
            <el-col align="center" style="line-height:60px " class="menuButton">
              <div style="height: 100%"><i class="el-icon-s-promotion"/>&nbsp;
                <el-dropdown placement="bottom" @command="clickCategory">
                  <span class="el-dropdown-link" style="color: #EEEEEE">分类<i
                    class="el-icon-arrow-down el-icon--right"></i></span>
                  <el-dropdown-menu slot="dropdown">
                    <div v-for="category in categorys" :key="category.id">
                      <el-dropdown-item :style="`color:${category.color}`"
                                        :command="{id:category.id,categoryName:category.categoryName}"><span
                        style="display: inline-block;margin-right: 2px">{{ category.categoryName }}</span><span
                        style="color:#373d41;font-weight: bold;float: right">{{ category.number }}</span>
                      </el-dropdown-item>
                    </div>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
            <el-col align="center" style="line-height:60px " class="menuButton">
              <div style="height: 100%" @click="clickMoment"><i class="el-icon-view"/>&nbsp;动态</div>
            </el-col>
            <el-col align="center" style="line-height:60px " class="menuButton">
              <div style="height: 100%" @click="clickTimeline"><i class="el-icon-pie-chart"/>&nbsp;归档</div>
            </el-col>
            <el-col align="center" style="line-height:60px " class="menuButton">
              <div style="height: 100%" @click="clickFriend"><i class="el-icon-user-solid"/>&nbsp;友链</div>
            </el-col>
            <el-col align="center" style="line-height:60px " class="menuButton">
              <div style="height: 100%" @click="clickAboutMe"><i class="el-icon-star-off"/>&nbsp;关于我</div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <div style="height: 60px">

          </div>
        </el-col>
        <el-col :span="5">

        </el-col>
      </el-row>

    </div>
  </div>
</template>


<style lang="less" scoped>


.header {
  height: 60px;
  background-color: #333333;
}

.menuButton:hover {
  background-color: #606266;
  cursor: pointer;
}

</style>

<script>
export default {
  name: "Nav",
  data() {
    return {
      categorys: []
    };
  },
  methods: {
    //点击首页
    clickHome() {
      this.$router.push('/')
    },
    //点击分类
    clickCategory(category) {
      this.$router.push({path: '/', query: {categoryId: category.id, categoryName: category.categoryName}})
    },
    //点击动态
    clickMoment() {
      this.$router.push('/momentList')
    },
    //点击时间线
    clickTimeline() {
      this.$router.push('/timeline')
    },
    //点击友链
    clickFriend(){
      this.$router.push('/friend')
    },
    //点击关于我按钮
    clickAboutMe() {
      sessionStorage.setItem("webPage", '3');
      sessionStorage.setItem("belongId", 27);
      //this.$store.commit(SET_COMMENT_QUERY_PARAMS,{webPage:0,belongId:id}) //设置评论所属页面和文章id
      this.$router.push(`/blogDetail/27`)

    },
    //获取所有分类信息
    getAllCategorys() {
      this.$http({
        url: '/category/all'
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log("分类：" + data.data)
          this.categorys = data.data;
        }
      })
    },

  },
  mounted() {
    this.getAllCategorys();
  }
}
</script>


